<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>Adminox - Responsive Web App Kit</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description">
	<meta content="Coderthemes" name="author">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- App favicon -->
	<link rel="shortcut icon" href="${ctx}/admin/${ctx}/admin/images/favicon.ico">
	<!-- DataTables -->
	<link href="${ctx}/admin/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">
	<!-- Responsive datatable examples -->
	<link href="${ctx}/admin/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">
	<!-- App css -->
	<link href="${ctx}/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/icons.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/metismenu.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/style.css" rel="stylesheet" type="text/css">
	<script src="${ctx}/admin/js/modernizr.min.js"></script>
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
    <#include "../common/header.ftl">
	<!-- Top Bar End -->
	<!-- ========== Left Sidebar Start ========== -->
    <#include "../common/menu.ftl">
	<!-- Left Sidebar End -->
	<!-- ============================================================== -->
	<!-- Start right Content here -->
	<!-- ============================================================== -->
	<div class="content-page">
		<!-- Start content -->
		<div class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-12">
						<div class="page-title-box">
							<h4 class="page-title float-left">微信关键字</h4>
							<ol class="breadcrumb float-right">
								<li class="breadcrumb-item"><a href="#">Adminox</a></li>
								<li class="breadcrumb-item"><a href="#">Tables</a></li>
								<li class="breadcrumb-item active">Datatable</li>
							</ol>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<!-- end row -->
				<div class="row">
					<div class="col-12">
						<div class="card-box table-responsive">
							<h4 class="text-uppercase font-18">微信关键字</h4>
							<div class="border m-b-30"></div>
							<div class="row">
								<div class="col-12">
									<div class="m-b-30">
										<button type="button" onclick="add_keywords()"
										        class="btn btn-primary waves-effect w-md waves-light"><i
												class="fa fa-plus"></i> 新增
										</button>
									</div>
									</duv>
								</div>
								<table id="datatable-buttons" class="table table-striped table-bordered" cellspacing="0"
								       width="100%">
									<thead>
									<tr>
										<th>关键字</th>
										<th>关键字类型</th>
										<th>消息类型</th>
										<th>素材名称</th>
										<th>操作</th>
									</tr>
									</thead>
									<tbody>
                                   <#list autoResponseList as autoResponse >
                                <tr>
	                                <td>${autoResponse.keyword}</td>
	                                <td>${autoResponse.keywordType}</td>
	                                <td>${autoResponse.msgType}</td>
	                                <td>${autoResponse.templateName!''}</td>
	                                <td>操作</td>
                                </tr>
                                </#list>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<!-- end row -->
				</div>
				<!-- container -->
			</div>
			<!-- content -->
    <#include "../common/footer.ftl">
		</div>

		<!--新增文本素材-->
		<div id="add-keywods" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		     aria-hidden="true" style="display: none;">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title">新增关键字</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label for="template-name" class="control-label">关键字</label>
									<input type="text" class="form-control" id="keywords">
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-form-label">匹配类型</label>
									<select class="form-control" id="keywords-type">
										<option value="1">全匹配</option>
										<option value="2">模糊匹配</option>
									</select>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-form-label">消息类型</label>
									<select class="form-control" id="msg-type">
										<option value="text">文本消息</option>
										<option value="text">图文消息</option>
									</select>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label class="col-form-label">素材名称</label>
									<select class="form-control" id="template-id">
                                        <#list textTemplateList as template>
                                            <option value="${template.id}">${template.templateName}</option>
                                        </#list>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">关闭</button>
						<button type="button" id="model-save" class="btn btn-info waves-effect waves-light">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!-- ============================================================== -->
		<!-- End Right content here -->
		<!-- ============================================================== -->
	</div>
	<!-- END wrapper -->
	<!-- jQuery  -->
	<script src="${ctx}/admin/js/jquery.min.js"></script>
	<script src="${ctx}/admin/js/tether.min.js"></script>
	<!-- Tether for Bootstrap -->
	<script src="${ctx}/admin/js/bootstrap.min.js"></script>
	<script src="${ctx}/admin/js/metisMenu.min.js"></script>
	<script src="${ctx}/admin/js/waves.js"></script>
	<script src="${ctx}/admin/js/jquery.slimscroll.js"></script>
	<!-- Required datatable js -->
	<script src="${ctx}/admin/plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="${ctx}/admin/plugins/datatables/dataTables.bootstrap4.min.js"></script>
	<!-- Buttons examples -->
	<script src="${ctx}/admin/plugins/datatables/dataTables.buttons.min.js"></script>
	<script src="${ctx}/admin/plugins/datatables/buttons.bootstrap4.min.js"></script>
	<script src="${ctx}/admin/plugins/datatables/jszip.min.js"></script>
	<script src="${ctx}/admin/plugins/datatables/pdfmake.min.js"></script>
	<script src="${ctx}/admin/plugins/datatables/vfs_fonts.js"></script>
	<script src="${ctx}/admin/plugins/datatables/buttons.html5.min.js"></script>
	<script src="${ctx}/admin/plugins/datatables/buttons.print.min.js"></script>
	<script src="${ctx}/admin/plugins/datatables/buttons.colVis.min.js"></script>
	<!-- Responsive examples -->
	<script src="${ctx}/admin/plugins/datatables/dataTables.responsive.min.js"></script>
	<script src="${ctx}/admin/plugins/datatables/responsive.bootstrap4.min.js"></script>
	<!-- App js -->
	<script src="${ctx}/admin/js/jquery.core.js"></script>
	<script src="${ctx}/admin/js/jquery.app.js"></script>
	<script type="text/javascript">
		function add_keywords() {
			$("#add-keywods").modal('show');
		}

		$(function () {
			$("#model-save").on('click', function () {
				var keywords = $("#keywords").val();
				var keywordType = $("#keywords-type").val();
				var msgType = $("#msg-type").val();
				var templateId = $("#template-id").val();
				var templateName = $("#template-id option:selected").text();
				$.ajax({
					url: '${ctx}/auto_response/keyword/add',
					data: {'keywords': keywords, 'keywordType': keywordType,'msgType':msgType,'templateId':templateId,'templateName':templateName},
					type: 'POST',
					success: function (res) {
						alert(res);
					}
				})
			})
		})
	</script>
</body>
</html>